.essential-theme {
  .is-grid {
    padding: 0px;

    div {
      .is-tile-caption {
        margin-top: 30px;
        margin-bottom: 0px;
      }
    }

    ion-col:first-child {
      padding-left: 0px;
    }

    ion-col:last-child {
      padding-right: 0px;
    }

    button {
      min-height: 4.4rem;
      border-color: map-get($colors, is-mute-light);
    }

    ion-col ion-row:not(:last-child) {
      border-bottom: 1px solid map-get($colors, is-mute-light);
    }

    ion-col ion-row {
      h3 {
        color: map-get($colors, is-mute-normal);
        font-size: 1.2rem;
        font-weight: 300;
        width: 100%;
        margin-right: 16px;

        span {
          font-size: 1.5rem;
          padding-bottom: 0;
          color: map-get($colors, is-text-dark);
        }
      }
    }
  }

  .is-grid-tiles {
    .is-grid-title ion-col.is-tile {
      padding-top: 12px;
      padding-bottom: 12px;
      font-size: 1.5rem;
      color: map-get($colors, is-text-dark);

      ion-icon {
        font-size: 2.4rem;
        padding-right: 16px;
      }
    }

    .is-grid-title-buttons {
      ion-col.is-tile {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0;

        div {
          display: flex;
          align-items: center;
          padding: 0 16px 0 0;
          margin-top: 6px;
          margin-bottom: 6px;

          > span:first-child {
            padding-right: 16px;
            color: map-get($colors, is-mute-normal);
            font-weight: 300;
          }

          button {
            border-color: map-get($colors, primary);
            min-height: 3.4rem;
            text-transform: capitalize;
            font-weight: 300;
          }
        }
      }
    }

    .is-col-header {
      padding: 0;
      display: flex;
      align-self: stretch;
      background-color: #f7f7f7;

      p {
        margin: 13px 8px 13px 16px;
        color: map-get($colors, is-mute-normal);
        font-size: 1.2rem;
        font-weight: 300;
      }
    }

    h3 {
      span {
        font-size: 1.2rem;
        color: map-get($colors, is-mute-normal);
        display: block;
        padding-bottom: 12px;
      }

      span.colored {
        color: unset;
        font-size: unset;
      }

      margin-bottom: 1.6rem;
      margin-left: 16px;
      color: map-get($colors, is-text-dark);
      font-size: 2.5rem;
      font-weight: 300;
    }

    h6 {
      color: map-get($colors, is-text-dark);
    }

    ion-icon {
      color: map-get($colors, is-mute-normal);
    }

    ion-col {
      border: 1px solid map-get($colors, is-mute-light);
    }

    ion-col:last-child {
      border-left: none;
    }

    ion-col {
      border-bottom: none;
    }

    ion-row:last-child {
      ion-col {
        border-bottom: 1px solid map-get($colors, is-mute-light);
      }
    }
  }

  .is-grid-tiles.unbordered {
    ion-row ion-col {
      border: none;
    }
  }

  .is-grid-tiles[padding] {
    h3:first-child {
      margin-top: 1.6rem;
    }
  }
}
